<?xml version="1.0" encoding="UTF-8"?>
<ui:composition template="/WEB-INF/templates/default.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:my="http://java.sun.com/jsf/composite/components">
<ui:define name="content">
<h:outputScript target="head" name="showMessage.js" library="js"/>

        <h1>Sistema de Cadastro Discador Telein</h1>
<rich:tabPanel switchType="client">
        <rich:tab header="Discador">
<h:outputStylesheet name="app.css" library="css"/> 
        <div>
            <p>Você poderá cadastrar todos os funcionários discadores por esta plataforma</p>
        </div>
       <h:form id="reg">
          <rich:panel id="newDiscadorPanel" styleClass=".form" header="Discadores Registrados" headerClass="header">
              <p>.</p>

              <my:discadorForm id="discadorForm" discador="#{newDiscador}"/>

             <h:panelGrid columns="2">
                <a4j:commandButton id="register" action="#{discadorController.register}" value="Cadastrar"
                                   styleClass="register" execute="newDiscadorPanel" render="newDiscadorPanel"/>
                <rich:messages globalOnly="true"/>
             </h:panelGrid>
          </rich:panel>
          <br />

          <div id="newDiscadorMessages" class="update"/>

          <rich:collapsiblePanel id="discadorList" header="Discadores" headerClass="header" title="Click to expand/collapse"  ajaxRendered="true">
             <h:panelGroup rendered="#{empty discadors}">
                <em>Nenhum discador registrado.</em>
             </h:panelGroup>
             <rich:dataTable id="discadorTable" var="_discador" value="#{discadors}" rendered="#{not empty discadors}" style="width : 100%">
                   <rich:column id="view">
                      <a4j:commandLink styleClass="no-decor" render="discadorPanel" execute="@this"
                                       oncomplete="#{rich:component('discadorPopup')}.show()">
                         Detalhes
                         <f:setPropertyActionListener target="#{discadorEditController.discador}" value="#{_discador}"/>
                      </a4j:commandLink>
                   </rich:column>
                   <rich:column id="discador_id">
                      <f:facet name="header">Id</f:facet>
                      #{_discador.id}
                   </rich:column>
                   <rich:column id="name">
                      <f:facet name="header">Name</f:facet>
                      #{_discador.name}
                   </rich:column>
                   <rich:column id="email">
                      <f:facet name="header">Email</f:facet>
                      #{_discador.email}
                   </rich:column>
                   <rich:column id="telefone">
                      <f:facet name="header">Telefone</f:facet>
                      #{_discador.telefone}
                   </rich:column>
                   <rich:column>
                   		<a4j:commandLink styleClass="no-decor" render="editGrid" execute="@this"
		                    oncomplete="#{rich:component('editPane')}.show()">
		                    <h:graphicImage name="edit.png" library="gfx"  alt="edit"/>
		                    <a4j:param value="#{it.index}" assignTo="#{discadorEditController.discador}" />
		                    <f:setPropertyActionListener target="#{discadorEditController.discador}" value="#{_discador}" />
		                </a4j:commandLink>
		                <a4j:commandLink styleClass="no-decor" execute="@this" render="@none"
		                    oncomplete="#{rich:component('deletePane')}.show()">
		                    <h:graphicImage name="delete.png" library="gfx"  alt="delete"/>
		                    <a4j:param value="#{it.index}" assignTo="#{discadorEditController.discador}" />
		                    <f:setPropertyActionListener target="#{discadorEditController.discador}" value="#{_discador}" />
		                </a4j:commandLink>
            		</rich:column>
                   <f:facet name="footer">
                     __
                   </f:facet>
                </rich:dataTable>
          </rich:collapsiblePanel>

          <rich:popupPanel id="discadorPopup" modal="true" onmaskclick="#{rich:component('discadorPopup')}.hide()"
                           domElementAttachment="form" autosized="true">
             <f:facet name="header">
                <h:outputText value="Discador Details"/>
             </f:facet>
             <f:facet name="controls">
                <h:outputLink value="#" onclick="#{rich:component('discadorPopup')}.hide(); return false;">
                   X
                </h:outputLink>
             </f:facet>
             <h:panelGroup id="discadorPanel">
                <my:discadorForm discador="#{discador}"/>
             </h:panelGroup>
          </rich:popupPanel>
        <rich:popupPanel id="statPane" autosized="true">
            <h:graphicImage value="loading.gif" alt="ai" library="gfx"/>
            Carregando...
        </rich:popupPanel>
 
 		<a4j:jsFunction name="remove" action="#{discadorEditController.remove}" render="discadorList" execute="@this"
            oncomplete="#{rich:component('deletePane')}.hide();" />
 
        <rich:popupPanel id="deletePane" autosized="true">
            Tem certeza que deseja exluir esse discador?
            <a4j:commandButton value="Cancel" onclick="#{rich:component('deletePane')}.hide(); return false;" />
            <a4j:commandButton value="Delete" onclick="remove(); return false;" />
        </rich:popupPanel>
		<rich:popupPanel header="Alteração do Discador" id="editPane" domElementAttachment="parent" width="400" height="170">
            <h:panelGrid columns="3" id="editGrid">
                <h:outputText value="Nome" />
                <h:inputText value="#{discadorEditController.discador.name}" id="nome"/>
                <h:panelGroup />
                <h:outputText value="email" />
                <h:inputText value="#{discadorEditController.discador.email}" id="email"/>
                <h:panelGroup />
                <h:outputText value="telefone" />
                <h:inputText value="#{discadorEditController.discador.telefone}" id="telefone"/>
                <h:panelGroup />
            </h:panelGrid>
            <a4j:commandButton value="" action="#{discadorEditController.edit}" render="discadorList" execute="editPane"
                oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPane')}.hide();}" />
            <a4j:commandButton value="Cancel" onclick="#{rich:component('editPane')}.hide(); return false;" />
        </rich:popupPanel>
		
		
          <a4j:push address="pushCdi" ondataavailable="showMessage(event.rf.data)">
             <a4j:ajax event="dataavailable" render="discadorList" />
          </a4j:push>

       </h:form>
        </rich:tab>
        <rich:tab header="Usuario">
            <div>
            <p>Você poderá cadastrar todos os usuarios do sistema por esta plataforma</p>
        	</div>
		      <h:form id="reg2">
		          <rich:panel id="newUserPanel" styleClass=".form" header="Usuarios Registrados" headerClass="header">
		              <p>.</p>
		
		              <my:userForm id="userForm" user="#{newUser}"/>
		
		             <h:panelGrid columns="2">
		                <a4j:commandButton id="register" action="#{userController.register}" value="Register"
		                                   styleClass="register" execute="newUserPanel" render="newUserPanel"/>
		                <rich:messages globalOnly="true"/>
		             </h:panelGrid>
		             <h:selectOneRadio value="en/US" valueChangeListener="#{calendarBean.selectLocale}">
                        <a4j:ajax event="click" render="perfil" />
                        <f:selectItem itemLabel="Funcionario" itemValue="1" />
                        <f:selectItem itemLabel="Gerente" itemValue="2" />
                        <f:selectItem itemLabel="Admin" itemValue="3" />
                    </h:selectOneRadio>
		          </rich:panel>
		          <br />
		
		          <div id="newUserMessages" class="update"/>
		
		          <rich:collapsiblePanel id="userList" header="Usuarios" headerClass="header" title="Click to expand/collapse">
		             <h:panelGroup rendered="#{empty users}">
		                <em>Nenhum usuario registrado.</em>
		             </h:panelGroup>
		             <rich:dataTable id="userTable" var="_user" value="#{users}" rendered="#{not empty users}" style="width : 100%">
		                   <rich:column id="view">
		                      <a4j:commandLink styleClass="no-decor" render="userPanel" execute="@this"
		                                       oncomplete="#{rich:component('userPopup')}.show()">
		                         Detalhes
		                         <f:setPropertyActionListener target="#{userController.user}" value="#{_user}"/>
		                      </a4j:commandLink>
		                   </rich:column>
		                   <rich:column id="user_id">
		                      <f:facet name="header">Id</f:facet>
		                      #{_user.id}
		                   </rich:column>
		                   <rich:column id="login">
		                      <f:facet name="header">Login</f:facet>
		                      #{_user.login}
		                   </rich:column>
		                   <rich:column id="senha">
		                      <f:facet name="header">Senha</f:facet>
		                      #{_user.senha}
		                   </rich:column>
		                   <f:facet name="footer">
		                      <a>XXX</a>
		                   </f:facet>
		                </rich:dataTable>
		          </rich:collapsiblePanel>
		
		          <rich:popupPanel id="userPopup" modal="true" onmaskclick="#{rich:component('userPopup')}.hide()"
		                           domElementAttachment="form" autosized="true">
		             <f:facet name="header">
		                <h:outputText value="User Details"/>
		             </f:facet>
		             <f:facet name="controls">
		                <h:outputLink value="#" onclick="#{rich:component('userPopup')}.hide(); return false;">
		                   X
		                </h:outputLink>
		             </f:facet>
		             <h:panelGroup id="userPanel">
		                <my:userForm user="#{user}"/>
		             </h:panelGroup>
		          </rich:popupPanel>
		
		          <a4j:push address="pushCdi" ondataavailable="showMessage(event.rf.data)">
		             <a4j:ajax event="dataavailable" render="userList" />
		          </a4j:push>
		       </h:form>
        </rich:tab>
    </rich:tabPanel>
    </ui:define>
</ui:composition>
